<template>
  <h1>class 绑定</h1>

  <p :class="{'hello':isActive,'text-danger':isError}">演示 class 绑定</p>

  <p :class="obj">可以直接将对象丢进去</p>

  <p :class="[arrError, arrBig]">绑定数组</p>

  <!--  如果 isActivate 为 true 则显示 hello，反之不显示 -->
  <p :class="[isActive ? 'hello' : '']">在数组中使用判断条件</p>

  <p>数组可以嵌套对象，但对象不能嵌套数组，不常用，复杂度较高</p>
</template>

<script>
export default {
  data() {
    return {
      // 当 isActive 为 true 时，class 绑定生效，class 中具有 hello 类，反之不显示
      isActive: true,
      isError: false,
      // 和第一种情况相同，在这里写更简便
      obj: {
        'hello': true,
        'text-danger': false
      },
      arrError: 'text-danger',
      arrBig: 'big'
    }
  }
}
</script>

<style>
.hello {
  color: blue;
}

.text-danger {
  color: red;
}

.big {
  font-size: 30px;
}
</style>